<template>
    <div class="Monitor_Top">
        <p style="font-size: 14px; font-weight: 700; color: rgba(162, 182, 255, 1);">
            监控情况
        </p>
    </div>
    <div class="Monitor_Top_Floor">
        <div class="Floor">
            <div class="Floor_img">
                <img src="../../assets/Monitor_img.png" alt="">
            </div>
            <div class="Floor_R">
                <p class="Floor_R_p1">1号楼</p>
                <p class="Floor_R_p2">设备数量:500</p>
                <div>
                    <span class="Floor_R_span1">正常设备：</span>
                    <span class="Floor_R_span2">240</span>
                    <span class="Floor_R_span3">故障设备：</span>
                    <span class="Floor_R_span4">140</span>
                </div>
            </div>
        </div>
        <div class="Floor1">
            <div class="Floor_img">
                <img src="../../assets/Monitor_img.png" alt="">
            </div>
            <div class="Floor_R">
                <p class="Floor_R_p1">1号楼</p>
                <p class="Floor_R_p2">设备数量:500</p>
                <div>
                    <span class="Floor_R_span1">正常设备：</span>
                    <span class="Floor_R_span2">240</span>
                    <span class="Floor_R_span3">故障设备：</span>
                    <span class="Floor_R_span4">140</span>
                </div>
            </div>
        </div>
        <div class="Floor2">
            <div class="Floor_img">
                <img src="../../assets/Monitor_img.png" alt="">
            </div>
            <div class="Floor_R">
                <p class="Floor_R_p1">1号楼</p>
                <p class="Floor_R_p2">设备数量:500</p>
                <div>
                    <span class="Floor_R_span1">正常设备：</span>
                    <span class="Floor_R_span2">240</span>
                    <span class="Floor_R_span3">故障设备：</span>
                    <span class="Floor_R_span4">140</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.Monitor_Top {
    position: fixed;
    left: 70px;
    top: 70px;
    width: 330px;
    height: 30px;
    opacity: 1;
    background-image: url('../../assets/Path2.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    line-height: 30px;

    p {
        margin-left: 14px;
    }
}

.Monitor_Top_Floor {
    position: fixed;
    left: 70px;
    top: 110px;
    width: 330px;
    height: 210px;
    background: rgba(12, 29, 95, 1);

    .Floor,
    .Floor1,
    .Floor2 {
        width: 100%;
        height: 62px;
        background: url('../../assets/PhotoSafety.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;

        .Floor_img {
            width: 100px;
            height: 62px;
            // background: red;
            margin-left: 10px;

            img {
                width: 100%;
                height: 50px;
                margin-top: 5px;
            }
        }

        .Floor_R {
            width: 180px;
            height: 100%;
            margin-left: 40px;
            line-height: 20px;

            .Floor_R_p1 {
                color: rgba(162, 182, 255, 1);
                font-weight: 400;
                font-size: 14px;
            }

            .Floor_R_p2 {
                font-weight: 400;
                font-size: 12px;
            }

            .Floor_R_span1 {
                font-size: 9px;
                font-weight: 400;
                color: rgb(194, 187, 187);
            }

            .Floor_R_span2 {
                color: rgba(117, 255, 7, 1);
                font-size: 9px;
            }

            .Floor_R_span3 {
                font-size: 9px;
                font-weight: 400;
                color: rgb(194, 187, 187);
                margin-left: 10px;
            }

            .Floor_R_span4 {
                color: rgba(254, 0, 0, 1);
                font-size: 9px;
            }
        }
    }

    .Floor1 {
        width: 100%;
        height: 62px;
        background: url('../../assets/PhotoSafety.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 10px;
    }

    .Floor2 {
        width: 100%;
        height: 62px;
        background: url('../../assets/PhotoSafety.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-top: 11px;
    }

}
</style>